<!-- 新增/修改弹框 -->
<template>
  <!-- 新增/修改弹窗 -->
  <el-dialog
    v-model="dialogDetail.visible"
    :width="screenWidth"
    :fullscreen="mobile === 'mobile'"
    :title="dialogDetail.title"
    draggable
    close-icon="CloseBold"
    :close-delay="200"
    :loading="loading"
    @close="closeDialog(false)"
  >
    <el-descriptions class="margin-top" :column="2" :size="size" border>
      <el-descriptions-item label-class-name="cell-item" label-align="right" label="所属企业">
        <div class="cell-item-width">{{ detailInfo.corpName }}</div>
      </el-descriptions-item>
      <el-descriptions-item label-class-name="cell-item" label-align="right" label="企业社会信用代码">
        <div class="cell-item-width">{{ detailInfo.corpCode }}</div>
      </el-descriptions-item>
      <el-descriptions-item label-class-name="cell-item" label-align="right" label="设备编码">
        <div class="cell-item-width">{{ detailInfo.deviceCode }}</div>
      </el-descriptions-item>
      <el-descriptions-item label-class-name="cell-item" label-align="right" label="设备描述">
        <div class="cell-item-width">{{ detailInfo.description }}</div>
      </el-descriptions-item>
      <el-descriptions-item label-class-name="cell-item" label-align="right" label="状态">
        <div class="cell-item-width">{{ detailInfo.statusName }}</div>
      </el-descriptions-item>
      <el-descriptions-item
        v-show="detailInfo.status != 0"
        label-class-name="cell-item"
        label-align="right"
        label="审核人"
      >
        <div class="cell-item-width">{{ detailInfo.auditUserName }}</div>
      </el-descriptions-item>
      <el-descriptions-item
        v-show="detailInfo.status != 0"
        label-class-name="cell-item"
        label-align="right"
        label="审核时间"
      >
        <div class="cell-item-width">{{ detailInfo.auditTime }}</div>
      </el-descriptions-item>
      <el-descriptions-item
        v-show="detailInfo.status === 2"
        label-class-name="cell-item"
        label-align="right"
        label="禁用原因"
      >
        <div class="cell-item-width">{{ detailInfo.disableReason }}</div>
      </el-descriptions-item>
      <el-descriptions-item
        v-show="detailInfo.status === 2"
        label-class-name="cell-item"
        label-align="right"
        label="禁用时间"
      >
        <div class="cell-item-width">{{ detailInfo.disableTime }}</div>
      </el-descriptions-item>
    </el-descriptions>
  </el-dialog>
</template>

<script lang="ts" setup>
import { QueryCardReaderDeviceDetail } from "@/api/device/index";
import { useScreen } from "@/store/modules/screen";

//声明变量
const size = ref("");
const screenStore = useScreen();
const mobile = computed(() => screenStore.device);
const screenWidth = ref(900);
const itemSpan = ref(12);
const props = defineProps({
  dialogDetail: {
    type: Object,
    default: () => ({
      visible: false,
      title: "详情",
      footBtn: "确认新增",
      id: 0,
    }),
  },
});
const detailInfo = ref<any>({});
const { dialogDetail } = toRefs(props);
const emit = defineEmits(["sendClose"]);
const loading = ref(false);

function initScreen() {
  if (mobile.value === "mobile") {
    screenWidth.value = screenStore.screenWidth;
    itemSpan.value = 24;
  } else {
    screenWidth.value = 900;
    itemSpan.value = 12;
  }
}
const initForm = async function () {
  if (dialogDetail.value.id) {
    loading.value = true;
    QueryCardReaderDeviceDetail(props.dialogDetail.id)
      .then((res) => {
        if (res.type == 0) {
          if (res.success) {
            detailInfo.value = res.data;
          } else {
          }
        } else {
        }
      })
      .finally(() => {
        loading.value = false;
      });
  }
};

onMounted(() => {
  initScreen();
  initForm();
});

/**
 * 关闭弹窗
 */
function closeDialog(needRefresh: boolean) {
  detailInfo.value = {};
  emit("sendClose", needRefresh);
}
</script>

<style lang="scss" scoped>
.cell-item-width {
  min-width: 150px !important;
}
.cell-item {
  //width: 120px !important;
}
:deep(.el-form-item) {
  flex-wrap: wrap;
}

:deep(.el-input) {
  width: 100%;
}

:deep(.el-select) {
  width: 100%;
}
:deep(.el-cascader) {
  width: 100%;
}
:deep(.el-input__wrapper) {
  width: 100%;
}

:deep(.el-form-item__label) {
  color: #696868;
  font-size: 13px;
}
</style>
